<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<div class="user-info">
						<div class="user-info-top">
							<el-avatar :size="80" src="img/avatar.png"></el-avatar>
							<h2>{{ form.nickName||'-' }}</h2>
							<p>{{ form.about||'无签名' }}</p>
							<el-button type="primary" round icon="el-icon-collection-tag" size="large">{{ form.username||'-' }}</el-button>
						</div>
						<div class="user-info-main">
							<ul>
								<li><label><el-icon><el-icon-user /></el-icon></label><span>{{ form.email||'无' }}</span></li>
								<li><label><el-icon><el-icon-present /></el-icon></label><span>{{form.birth?form.birth.split(' ')[0]:'无' }}</span></li>
								<li><label><el-icon><el-icon-male /></el-icon></label><span>{{form.sex == 'man' ? '男':'女'}}</span></li>
<!--								<li><label><el-icon><el-icon-location /></el-icon></label><span>中国/上海/金山</span></li>-->
							<li><label><el-icon><el-icon-office-building /></el-icon></label><span>{{form.tenantTitle || '无'}}</span></li>
								<li><label><el-icon><el-icon-coin /></el-icon></label><span>{{form.roleNames}}</span></li>
							</ul>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="16">
				<el-card shadow="never">
					<el-tabs tab-position="top" v-model="tabs">
						<el-tab-pane :label="$t('user.messageCenter')" name="messageCenter">
							<scTable ref="noticeTable" :apiObj="noticeApi" @selection-change="selectionChange" stripe remoteSort remoteFilter>
								<el-table-column type="selection" width="50"></el-table-column>
								<el-table-column label="是否查看"  width="100" prop="readFlag"   column-key="readFlag" >
									<template #default="scope">
										<el-tag v-if="scope.row.readFlag ==1" type="info">已查看</el-tag>
										<el-tag v-if="scope.row.readFlag ==0" >未查看</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="标题" prop="title"   column-key="title" ></el-table-column>
								<el-table-column label="简介" prop="description"  ></el-table-column>
								<el-table-column label="时间" prop="timeStr"  ></el-table-column>
								<el-table-column label="操作" fixed="right" align="center" width="180">
									<template #default="scope">
										<el-button type="primary" text size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
									</template>
								</el-table-column>
							</scTable>
						</el-tab-pane>
						<el-tab-pane :label="$t('user.info')" name="userInfo">
							<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
								<el-form-item label="账号">
									<el-input v-model="form.username" disabled></el-input>
									<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
								</el-form-item>
								<el-form-item label="昵称">
									<el-input v-model="form.nickName"></el-input>
								</el-form-item>
								<el-form-item label="性别">
									<el-select v-model="form.sex" placeholder="请选择">
										<el-option label="男" value="man"></el-option>
										<el-option label="女" value="woman"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="生日" prop="birth">
									<el-date-picker v-model="form.birth" type="date" value-format="YYYY-MM-DD" placeholder="选择生日"></el-date-picker>
								</el-form-item>
								<el-form-item label="邮箱" prop="email">
									<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
								</el-form-item>
								<el-form-item label="手机号码" prop="mobile">
									<el-input v-model="form.mobile" placeholder="请输入手机号码" clearable></el-input>
								</el-form-item>
								<el-form-item label="个性签名">
									<el-input v-model="form.about" type="textarea"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="userInfoSubmit()">保存</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="editPassword">
							<el-form ref="epForm" :model="epForm" :rules="epRules" label-width="120px" style="width: 460px;margin-top:20px;">
								<el-form-item label="原密码"  prop="password">
									<el-input v-model="epForm.password" type="password" clearable></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="newPass">
									<el-input v-model="epForm.newPass" type="password"  clearable></el-input>
								</el-form-item>
								<el-form-item label="确认新密码" prop="cnewPass">
									<el-input v-model="epForm.cnewPass" type="password" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" :loading="isSaving" @click="passwordEditSubmit()">修改</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane :label="$t('user.settings')" name="settings">
							<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;">
								<el-form-item :label="$t('user.nightmode')">
									<el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>
									<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
								</el-form-item>
								<el-form-item label="主题颜色">
									<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
		<sc-dialog v-model="noticeDialog.visible" :title="noticeDialog.title"  :show-fullscreen="false" :show-close="false">
			{{ noticeDialog.content }}
			<template #footer>
				<el-button @click="noticeDialog.visible = false">取 消</el-button>
				<el-button type="primary" @click="markRead">知道了</el-button>
			</template>
		</sc-dialog>
	</el-main>
</template>

<script>
	import colorTool from '@/utils/color'
	export default {
		name: 'userCenter',
		data() {
			return {
				tabs:"messageCenter",
				noticeApi: this.$API.system.notice.list,
				noticeDialog:{
					noticeId:"",
					title:"",
					visible:false,
					content:""
				},
				form: {
				},
				epForm:{
					password:"",
					newPass:"",
					cnewPass:""
				},
				isSaving:false,
				epRules:{
					password:[
						{required: true, message: '请输入原密码'}
					],
					newPass: [
						{required: true, message: '请输入新密码'},
						{validator: (rule, value, callback) => {
								if (this.epForm.cnewPass !== '') {
									this.$refs.epForm.validateField('cnewPass');
								}
								callback();
							}}
					],
					cnewPass: [
						{required: true, message: '请再次输入新密码'},
						{validator: (rule, value, callback) => {
								if (value !== this.epForm.newPass) {
									callback(new Error('两次输入密码不一致!'));
								}else{
									callback();
								}
							}}
					],
				},
				colorList: ['#5A55E4', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
				config: {
					lang:  this.$CONFIG.LANG,
					dark: this.$TOOL.data.get('APP_DARK') || false,
					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR
				}
			}
		},
		watch:{
			'config.dark'(val){
				this.updateConfigTheme(val);
			},
			'config.colorPrimary'(val){
				this.updateConfigColor(val);
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter (to, from, next){
			next((vm)=>{
				if(from.is){
					//删除特殊标识，防止标签刷新重复执行
					delete from.is
					//执行特殊方法
					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
						type: 'success',
						center: true
					}).then(() => {}).catch(() => {})
				}else if(from.toNoticeCenter){
					//删除特殊标识，防止标签刷新重复执行
					delete from.toNoticeCenter
					this.tabs = "messageCenter"
				}
			})
		},
		methods: {
			async updateConfigTheme(val){
				var res = await this.$API.system.customConfig.savePersonalConfig.post("APP_THEME",val || 'default');
				if(res.success){
					if(val){
						document.documentElement.classList.add("dark")
						this.$TOOL.data.set("APP_DARK", val)
					}else{
						document.documentElement.classList.remove("dark")
						this.$TOOL.data.remove("APP_DARK")
					}
				}
			},
			async updateConfigColor(val){
				var res = await this.$API.system.customConfig.savePersonalConfig.post("APP_COLOR",val);
				if(res.success){
					document.documentElement.style.setProperty('--el-color-primary', val);
					for (let i = 1; i <= 9; i++) {
						document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val,i/10));
						document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
					}
					document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
					this.$TOOL.data.set("APP_COLOR", val);
				}
			},
			loadUserInfo(){
				var userInfo = this.$TOOL.data.get("USER_INFO");
				var roles = userInfo.roles;
				var roleNames = [];
				roles.forEach(role =>{
					roleNames.push(role.roleDescription);
				})
				userInfo.roleNames = roleNames;
				this.form = userInfo;
			},
			async userInfoSubmit(){
				var params= {
					id:this.form.id,
					nickName:this.form.nickName,
					sex:this.form.sex,
					about:this.form.about,
					birth:this.form.birth,
					email:this.form.email,
					mobile:this.form.mobile
				}
				var res = await this.$API.system.user.userCenterEdit.post(params);
				if(res.success){
					this.$message.success("保存成功！")
					//清除缓存 重新加载
					var userInfo = await this.$API.auth.getUserInfo.get({username:this.form.username})
					if(userInfo.success){
						this.$TOOL.data.remove("USER_INFO")
						this.$TOOL.data.set("USER_INFO",userInfo.data)
					}
				}
			},
			 passwordEditSubmit(){
				 this.$refs.epForm.validate(async (valid) => {
					 if (valid) {
						 this.isSaving = true;
						 var params = {password:this.epForm.password,newPass:this.epForm.cnewPass}
						 var res = await this.$API.system.user.editPassword.post(params);
						 this.isSaving = false;
						 if(res.success){
							 this.$message.success("修改密码成功！请重新登录")
							 //退出登录
							 this.$TOOL.data.clear()
							 this.$router.replace({path: '/login'})
						 }
					 }else{
						 return false;
					 }
				 })
			},
			//查看
			table_show(item){
				this.noticeDialog.noticeId = item.id
				this.noticeDialog.title = item.title
				this.noticeDialog.content = item.content
				this.noticeDialog.visible = true
			},
			//标记已读
			async markRead(){
				var noticeId = this.noticeDialog.noticeId;
				var res = await this.$API.system.notice.markRead.post(noticeId)
				if(res.success){
					this.noticeDialog.visible = false
					this.$refs.noticeTable.refresh();
				}
			},
		},
		mounted() {
		},
		created() {
			this.loadUserInfo();
		},
	}
</script>

<style scoped>
	.el-card {margin-bottom:15px;}
	.activity-item {font-size: 13px;color: #999;display: flex;align-items: center;}
	.activity-item label {color: #333;margin-right:10px;}
	.activity-item .el-avatar {margin-right:10px;}
	.activity-item .el-tag {margin-right:10px;}

	[data-theme='dark'] .user-info-bottom {border-color: var(--el-border-color-base);}
	[data-theme='dark'] .activity-item label {color: #999;}
</style>
